const iptName = document.querySelector('[name="name"]')
const iptPhone = document.querySelector('[name="phone"]')
const iptEducation = document.querySelector('[name="education"]')
const iptAge = document.querySelector('[name="age"]')
const iptMoney = document.querySelector('[name="money"]')
const iptSave = document.querySelector('[name="save"]')
const iptReset = document.querySelector('[name="reset"]')

const table = document.querySelector('.shang')
const tBody = document.querySelector('.xieru')
const box = document.querySelector('.box')
const box1 = document.querySelector('.box1')
const iptName1 = document.querySelector('[name="name1"]')
const iptPhone1 = document.querySelector('[name="phone1"]')
const iptEducation1 = document.querySelector('[name="education1"]')
const iptAge1 = document.querySelector('[name="age1"]')
const iptMoney1 = document.querySelector('[name="money1"]')


let a = true;
table.addEventListener('input',function(e){
    if(e.target.getAttribute('name')==='name'){
        let res = /^\D\w{8,16}$/
        if(res.test(e.target.value)){
            e.target.style.borderColor='green' ;
            a = true;
        }else{
            e.target.style.borderColor='red' ;
            a = false;
        }
    }else if(e.target.getAttribute('name')==='phone'){
        let res = /^\d{11}$/
        if(res.test(e.target.value)){
            e.target.style.borderColor='green' ;
            a = true;
        }else{
            e.target.style.borderColor='red' ;
            a = false;
        }
    }else if(e.target.getAttribute('name')==='age'){
        let res = /^[0-9][0-9]$/
        if(res.test(e.target.value)){
            e.target.style.borderColor='green' ;
            a = true;
        }else{
            e.target.style.borderColor='red' ;
            a = false;
        }
    }else if(e.target.getAttribute('name')==='money'){
        let res = /^\d{3,}$/
        if(res.test(e.target.value)){
            e.target.style.borderColor='green' ;
            a = true;
        }else{
            e.target.style.borderColor='red' ;
            a = false;
        }
    }else if(e.target.getAttribute('name')==='education'){
        let res = /^[\u4e00-\u9fa5]{0,3}$/;
        if(res.test(e.target.value)){
            e.target.style.borderColor='green' ;
            a = true;
        }else{
            e.target.style.borderColor='red' ;
            a = false;
        }
    }
    if(iptName.value===''&&iptPhone.value===''&&iptEducation.value===''&&iptAge.value===''&&iptMoney.value===''){
        a=true
    }
    if(a){
        iptSave.disabled = false;
    }else{
        iptSave.disabled = true;
    }
})



let message = [];

iptSave.addEventListener('click',function(e){    
    e.preventDefault()
    let nameVal = iptName.value
    let phoneVal = iptPhone.value
    let educationVal = iptEducation.value
    let ageVal = iptAge.value
    let moneyVal = iptMoney.value
    
    let obj = {name:nameVal,phone:phoneVal,education:educationVal,age:ageVal,money:moneyVal,}
    message.push(obj);
    localStorage.name=JSON.stringify(message)
    write()
})

iptReset.addEventListener('click',function(e){    
    e.preventDefault()
    iptName.value = ''
    iptPhone.value= ''
    iptEducation.value= ''
    iptAge.value= ''
    iptMoney.value= ''

})


write()
function write(){
    let message1 = JSON.parse(localStorage.name)
    console.log(message1);
    let str = '';
    message1.forEach((item,key)=>{
        str += 
        `
        <tr>
        <td class="chang">${item.name}</td>
            <td class="chang">${item.phone}</td>
            <td class="chang">${item.education}</td>
            <td class="chang">${item.age}</td>
            <td class="chang">${item.money}</td>
            <td class="chang"><button name='alter' index=${key}>修改</button><button index=${key} name='del'>删除</button></td>
        </tr>
        `
    })
    tBody.innerHTML=str;
}

let b ;

tBody.addEventListener('click',function(e){
    if(e.target.getAttribute('name')==='alter'){
        b=e.target.getAttribute('index')
        box.style.display='block'
        let message1 = JSON.parse(localStorage.name)
        iptName1.value = message1[e.target.getAttribute('index')].name
        iptPhone1.value= message1[e.target.getAttribute('index')].phone
        iptEducation1.value= message1[e.target.getAttribute('index')].education
        iptAge1.value= message1[e.target.getAttribute('index')].age
        iptMoney1.value= message1[e.target.getAttribute('index')].money
    }else if(e.target.getAttribute('name')==='del'){
        let message2 = JSON.parse(localStorage.name)
        message2.splice(e.target.getAttribute('index')-0,1)
        localStorage.name=JSON.stringify(message2)
        write()  
    }
})

box.addEventListener('click',function(e){
    if(e.target.getAttribute('name')==='save1'){
        let message2 = JSON.parse(localStorage.name)

        message2[b].name=iptName1.value
        message2[b].phone=iptPhone1.value
        message2[b].education=iptEducation1.value
        message2[b].age=iptAge1.value
        message2[b].money=iptMoney1.value
        localStorage.name=JSON.stringify(message2)
        write()  
        box.style.display='none'

    }else if(e.target.getAttribute('name')==='reset1'){
        box.style.display='none'
    }
})

// box1.addEventListener('mousedown',function(e){
//     let startX = e.pageX - box1.offsetLeft
//     let startY = e.pageY - box1.offsetTop
//     window.addEventListener( 'mousemove',function(ed){
//         let moveX = ed.pageX -startX
//         let moveY = ed.pageY - startY
//         moveX = moveX<0?0:moveX
//         moveY = moveY<0?0:moveY
//             box1.style.top=moveY + 'px';
//             box1.style.left=moveX + 'px';
//     })  

// }) 
// box1.addEventListener('mouseup',function(){
//     window.removeEventListener('mousedown',fn) ;
//         box1.style.top=box1.offsetTop + 'px';
//         box1.style.left=box1.offsetLeft + 'px';
    
//     })   
drap(box1)

    function drap(obj) {
        obj.addEventListener('mousedown', start);
 
        function start(event) {
            if (event.button == 0) {
                offsetX = event.pageX - obj.offsetLeft + parseInt(getComputedStyle(obj)['margin-left']);
                offsetY = event.pageY - obj.offsetTop + parseInt(getComputedStyle(obj)['margin-top']);

                document.addEventListener('mousemove', move);
                document.addEventListener('mouseup', stop);
            }
            return false;
        }
 
        function move(event) {
            obj.style.left = (event.pageX - offsetX) + 'px';
            obj.style.top = (event.pageY - offsetY) + 'px';
            return false;
        }
 
        function stop(envet) {
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', stop);
        }
    }
 





